<template >
  <Header title="景点详情" :back="true" />
  <div class="detail">
    <div class="detail-img">
      <template v-if="!getDetailLoading">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in scenicDetail?.imageList" @click="bannerImageClick(index)" :key="index">
            <van-image class="img" :src="item" />
          </van-swipe-item>
        </van-swipe>
      </template>
      <van-skeleton v-else>
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image :style="{ width: '100%', height: '21.84rem' }" />
          </div>
        </template>
      </van-skeleton>
    </div>
    <!-- 引入产品详情组件 -->
    <PandaProductDetails :data="scenicDetail" :time="scenicSpotTimeSlotslist" :loading="getVoteListLoading">
      <!-- 列表 -->
      <div class="ticket_types_list">
        <template v-if="!getDetailLoading">
          <PandaTicketCard
            v-for="(item, index) in scenicVoteList"
            :data="scenicDetail"
            :key="index"
            :voteDetail="item"
          />
        </template>
        <van-skeleton v-else>
          <template #template>
            <div :style="{ width: '100%' }">
              <template v-for="i in 2" :key="i">
                <div :style="{ display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '2rem' }">
                  <div :style="{ flex: 1}">
                    <van-skeleton-paragraph row-width="30%" />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                  </div>
                </div>
              </template>
            </div>
          </template>
        </van-skeleton>
      </div>
      <!-- 简介 -->
      <template #desc>
        <div class="intro">
          <div style="color: #666666; font-size: 14px;" v-html="scenicDetail.basicInformation"></div>
        </div>
      </template>
    </PandaProductDetails>
  </div>
</template>
<script setup>
import { ref } from "vue"
import Header from "@/components/header/Header.vue"
import PandaProductDetails from "@/components/product-details/PandaProductDetails.vue"
import PandaTicketCard from "@/components/ticket-card/PandaTicketCard.vue"

const show = ref(false)
import { useRoute } from "vue-router"
const fileUrl = import.meta.env.VITE_FILE_URL
import { showImagePreview } from "vant"
import api from "@/api/index.js"
import { userStore } from "@/stores/user.js"

const user = userStore()

const route = useRoute()
const scenicId = route.params.id

const scenicsInfo = ref([])
const scenicSpotTicketlist = ref([])
const Setmeallist = ref([])
const htmlContent = ref()
const scenicSpotTicketid = ref([])
const scenicSpotTimeSlotslist = ref([])
const goodsKindsInfolist = ref([])
const minDate = ref(null)
const maxDate = ref(null)
const marketPrice = ref(null)

// 图片预览
function handelswip(e) {
  showImagePreview([e.target.src]);
}
const bannerImageClick = (index) => {
  showImagePreview({
    images: scenicDetail.value.imageList,
    startPosition: index
  });
}
// 简介
// 更具id获取景点详细

const scenicDetail = ref()
const getDetailLoading = ref(false)
const getDetailInfo = () => {
  getDetailLoading.value = true
  api.getPandaScenicDetailInfo(scenicId).then((res) => {
    scenicDetail.value = res.data
    const imageList = JSON.parse(res.data.imgsTxt)
    scenicDetail.value.imageList = imageList?.ImageSizeMapList?.[0]?.ImageURLList || []
    htmlContent.value = res.data.scenicsInfo?.basicInformation
    scenicsInfo.value = res.data.scenicsInfo
    scenicSpotTicketlist.value = res.data.scenicSpotTicket?.[0]?.goodsInfoList

    Setmeallist.value = res.data.scenicSpotTicket?.[1]?.goodsInfoList
    scenicSpotTimeSlotslist.value = res.data.scenicSpotTimeSlots
  }).finally(() => {
    getDetailLoading.value = false
  })
};
getDetailInfo();
// 对时间做处理

const scenicVoteList = ref([])
const getVoteListLoading = ref(false)
const getScenicVoteList = () => {
  getVoteListLoading.value = true
  api.getPandaScenicVoteList({
      spotId: route.params.id
    }).then((res) => {
      const list = res.data.sort((a, b) => {
        return (a.unitQuantity - b.unitQuantity)
      })
      list.forEach((item) => {
        const findIndex = scenicVoteList.value.findIndex((vote) => {
          return vote.peopleGroupStr === item.peopleGroupStr
        })
        if (findIndex !== -1) {
          scenicVoteList.value[findIndex].list.push(item)
        } else {
          scenicVoteList.value.push({
            peopleGroupStr: item.peopleGroupStr,
            list: [item]
          })
        }
      })
      minDate.value = new Date(res.data.goodsInfoVo?.validStartTime)
      maxDate.value = new Date(res.data.goodsInfoVo?.validEndTime)
      show.value = true
    })
    .finally(() => {
      getVoteListLoading.value = false
    })
}
getScenicVoteList()


const closePopup = () => {
  show.value = false;
};

function handelyudss() {
  handelyud(items.value, ids.value, scenicSpotTicketids.value);
}
const items = ref();
const ids = ref();
const scenicSpotTicketids = ref([]);
function handelshowBottom(item, id, scenicSpotTicketid) {
  items.value = item;
  ids.value = id;
  scenicSpotTicketids.value = scenicSpotTicketid;
}
</script>
<style lang="scss" scoped>
.ticket_types_list{
  margin-bottom: 4rem;
}
.yuding-jianjie {
  display: flex;
  align-items: center;
  justify-content: center;
}

.yuding {
  background: #ffffff;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 6rem;
  z-index: 999;
}

.yuding>div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 1rem;
}

.yuding>div>span>span {
  margin-right: 1rem;
  color: #ed6316;
  font-weight: 600;
}

.detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.detail-img {
  width: 100%;
  //height: 25rem;
  height: 21.84rem;
}

.img {
  width: 100%;
  height: 21.84rem;
  display: flex;
  align-content: center;
  justify-content: center;
}

.detail-info {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding-top: 20px;
  width: 100%;
  margin-top: 0.5333rem;
  border-radius: 10px;
  margin-bottom: 24px;
}

.detail-info>div:nth-of-type(2) {
  display: flex;
}

.detail-time {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
}

.detail-time>div:nth-of-type(1) {
  width: 100%;
  padding-left: 2rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.detail-time>div:nth-of-type(2) {
  margin-top: 1.5rem;
  width: 100%;
  padding-left: 2rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.ticket {
  width: 100%;
  min-height: 12rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0rpx 13rpx 29rpx 0rpx rgba(54, 141, 88, 0.05);
}

.ticket-info {
  width: 93%;
  height: 80%;
  background-color: #ffffff;
  // box-shadow: 0rpx 13rpx 29rpx 0rpx rgba(54, 141, 88, 0.05);
}

.rde {
  border-radius: 19px;
}

.red11 {
  border-bottom-left-radius: 19px;
  border-bottom-right-radius: 19px;
}

.onSale {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 10px;
}

.onSale>div {
  width: 80%;
}

.onSale>div>span:nth-of-type(2) {
  width: 50%;
}

.classred {
  background: red !important;
}

.infoss-ss {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  min-height: 10rem;
}

.infoss-ss>div {
  height: 100%;
  width: 100%;
  display: flex;
}

.infoss-ss>div>div {
  height: 100%;
  display: flex;
  align-items: center;
}

.infoss-ss-cc {
  margin-left: 2rem;
  flex-direction: column;
}

.infoss-ss-cc>span {
  font-weight: bold;
  color: #333333;
}

.infoss-ss-cc>div>span:nth-of-type(1) {
  border-radius: 5px;
  background-color: #d8f8e5;
  color: #4fac91;
  font-size: 0.75rem;
  margin-top: 8px;
  padding: 4px 6px;
  margin-right: 8px;
}

.infoss-ss-cc>div>span:nth-of-type(2) {
  border-radius: 5px;
  font-weight: 500;
  color: #999999;
  margin-top: 8px;
  font-size: 0.75rem;
}

.distt {
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.distt>div:nth-of-type(2) {
  width: calc(100% / 2);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3rem;
}

.fontsizw {
  width: 20rem;
  font-size: 23px;
  font-weight: 600;
  padding-left: 2rem;
}

.lo {
  //   width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 14px;
  padding: 4px 10px;
}

.jianjie {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3rem;
}

.timsss>span {
  width: calc(100% / 2);
}

.co {
  font-weight: 600;
  color: #666666;
}

.line {
  width: 3rem;
  height: 0.5rem;
  background: linear-gradient(90deg, var(--van-primary-color) 0%, #fbeaa8 92%);
  margin-left: 2rem;
}

.mar {
  padding-left: 2rem;
  font-weight: bold;
}

.riqi {
  width: 100%;
  height: 6rem;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.riqi>div {
  width: 85%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.riqi>div>div {
  width: 18%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #e4e1e1;
}

.riqi>div>div>span {
  width: 95%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.van-stepper>.van-stepper__input {
  width: 5rem !important;
}

.intro {
  height: 100%;
}


</style>
